<template>
  <div class="item-detail flex column">
    <div class="item-title">图片组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="">
          <div class="flex center">
            <Button type="primary" ghost @click="add">添加新图片</Button>
            <p style="margin-left: 10px;font-size: 12px;color: gray;">建议尺寸1340*500,新增图片需保存后进行预览。</p>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="banner-content-edit scroll">
      <draggable v-model="detailData.json" :options="dragOption">
        <transition-group>
          <div class="banner-content-item flex center" v-for="(item,index) in detailData.json" :key="'banneredit'+index">
            <div class="banner-img-wrapper">
              <div class="input-file-wrapper">
                <img :src="item.image_url" />
                <input :name="index" type="file" accept="image/*" @change='handleFileChange'></input>
              </div>
            </div>
            <div class="banner-form-wrapper">
              <Form :model="item" :label-width="70">
                <FormItem label="颜色">
                  <div class="colorList disFlex Flex-wrap">
                  	<!-- 透明颜色 -->
                    <div class="_colorItem" @click="item.rgba = 'transparent'" 
                    	:style="item.rgba == 'transparent' ? `border-color:#333`:''">
                    	<div class="_color" style="background-color:#fff;"></div>
                    </div>
                    <!-- 其他颜色 -->
                    <div class="_colorItem" v-for="(color,index) in colorList" @click="item.rgba = color" :key="'color'+index" :style="item.rgba == color ? `border-color:#333`:''">
                    	<div class="_color" :style="`background-color:${color};`"></div>
                    </div>
                  </div>
                </FormItem>
                <FormItem label="编辑文本">
                  <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false"   v-model="item.title" placeholder="请输入文本"></Input>
                </FormItem>
                <FormItem label="跳转链接">
                  <div class="flex center">
                    <Select v-model="item.skip_type" @on-change="chageSel(item)" class="select-wrapper">
                      <Option value="good">商品</Option>
                      <Option value="label">微页面</Option>
                    </Select>
                    <Input style="width: 200px;" v-model="item.skip_url" @click.native="tapInput(index,item)" placeholder="请输入商品ID或微页面ID" v-if="item.skip_type != 'group'"></Input>
                  </div>
                </FormItem>
              </Form>
            </div>
            <div class="icon-wrapper" @click="delBanner(index)">
              <Icon type="ios-trash-outline" />
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>


     <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="1" ref="goodsModal" :goodsIdStr="goodsIdStr"></goodsSelect>

    <!-- 微页面选择器 -->
     <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'

import draggable from 'vuedraggable'

export default {
  name: 'ImageDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      dragOption: {
        animation: 150,
        disabled: false
      },
      // 显示裁剪框
      showCrop: false,
      // 裁剪图片
      cropImg: '',
      // 裁剪图片索引
      cropIndex: 0,
      // 跳转索引
      jumpIndex: 0,

      // 颜色数组
      colorList:['rgba(0,0,0,.5)','rgba(217,170,86,.8)','rgba(225,146,71,.8)','rgba(217,103,86,.8)','rgba(225,71,71,.8)','rgba(232, 44, 44,.8)','rgba(118,82,22,.8)','rgba(92,35,7,.8)','rgba(92,7,7,.8)','rgba(92,7,40,.8)','rgba(86,7,92,.8)','rgba(92,88,7,.8)','rgba(63,92,7,.8)','rgba(30,92,7,.8)','rgba(7,80,92,.8)','rgba(33,7,92,.8)'],
	 }
  },

  computed: {
     goodsIdStr: function () {
      if (this.detailData.json.length>0) {
        if (this.jumpIndex > (this.detailData.json.length-1)) {
          this.jumpIndex = 0;
        }
        return this.detailData.json[this.jumpIndex].skip_url

      } else {
        return "";
      }
    },

  },

  methods: {

    tapInput(index,item) {
      this.jumpIndex = index;
      if (item.skip_type == "good") {
        this.openGoodsSelectFn();
      } else {
        // 打开微页面选择器
        this.$refs.micropageModal.show();
      }
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },

    // 选中商品回调
    commitGoodsFn(_id){
        this.detailData.json[this.jumpIndex].skip_url = _id;
        this.detailData.json[this.jumpIndex].path = "app/mall/item/item?goodsId="+_id;

    },

     // 选中微页面回调
    chosePages(ids) {
        this.detailData.json[this.jumpIndex].skip_url = ids[0];
        this.detailData.json[this.jumpIndex].path = "app/mall/label/label?labelId="+ids[0];

    },


    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[event.target.name].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

    // 添加轮播
    add(){
      var _json={
       	image_url:"https://file.open.banchengyun.com/1/2018/04/04/3767f35b6776aaa62478af1cc08ec040.png",
        path:'',
        skip_type:'goods',
        skip_url:'',
        rgba:'',
        title:"（标题）",
        rgba: "transparent"
      }
      if(typeof this.detailData.json != 'object') this.detailData.json=[];
      this.detailData.json.push(_json);
      this.$Message.success("添加成功，请编辑详细内容")
    },

    // 删除轮播
    delBanner(index) {
      this.detailData.json.splice(index,1);
    },

    /*
    * 选择器
    */
    chageSel(_item){
      if(_item.skip_type == 'group'){
          _item.path = 'app/common/webview/webview?url=headGroup.html';
      }else{
          _item.skip_url='';
      }
    },
    
  },
  components: {
  	draggable,goodsSelect,MicropageSelect
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

/*颜色样式*/
.colorList{}
.colorList ._colorItem{padding: 2px;border:1px solid #e6e6e6;margin: 2px;}
.colorList ._colorItem ._color{width: 16px;height: 16px;}

/*轮播编辑开始*/
.banner-content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
  overflow-x: scroll;
}
.banner-img-wrapper {
	min-width: 180px;
	width: 180px;
  height: 80px;
  padding: 5px;
  border: 1px solid #f2f2f2;
}
.banner-content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.banner-form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}
	
</style>
